/**
 * JourneyPlanListProd 标准参考实现
 *
 * 用途: Phase2 Preview组件标准范例
 * 关键点: bgStyle对象集中应用Component Style, Less文件仅定义子元素样式
 * 相关: templates/component-style-standard-pattern.md, templates/reference-component-styles.less
 */
/* eslint-disable */
import React from 'react';
import cl from 'classnames';
import { HexToRGB, shouldShowImage } from '@/utils/utils';
import defImg from '@/assets/images/plan_card_img.svg';
import { useAppSelector } from '@/app/hooks';

import Footer from '../Footer';
import NoData from '../NoData';

import style from './index.less';
import styles from '../../index.less';

const JourneyPlanListProd = (props) => {
  const {
    visible,
    topMargin,
    horizontalOutterMargin,
    bottomMargin,
    horizontalInnerPadding,
    topPadding,
    bottomPadding,

    showTitle,
    title,
    showRemarks,
    remarks,
    hasBg,
    bgType,
    bgColor,
    bgColorOpacity,
    bgImg,
    showOfferWithoutSub,
    salesCatgStyle, // Tab样式012 后期需求showOfferWithoutSub打开时需要
    offerCardStyle, // offer卡片样式 0 1
    showPlanValidityType,
    titleFontSize,
    titleFontColor,
    titleFontColorOpacity,
    isTitleFontBold,
    isTitleFontItalic,
    isTitleFontUnderline,
    position,
    remarksFontSize,
    remarksFontColor,
    remarksFontColorOpacity,
    isRemarksFontBold,
    isRemarksFontItalic,
    isRemarksFontUnderline,
    remarksPosition,
    showNoDataImg,
    shwNoDataHtml,
    noDataImg,
    noDataHtml,
    shwNoDataBtn,
    noDataBtns,
  } = props;
  const pageVerInfo = useAppSelector((state: any) => state.newPageInfo);
  const { dataPresentJourneyList } = pageVerInfo || {};

  const { detailsText, showDetail, showTotalAmount, buttonText } = props?.[`offerCardProps${offerCardStyle}`] || {};

  const titleStyle = {
    fontSize: `${titleFontSize}px`,
    color: HexToRGB(titleFontColor, titleFontColorOpacity),
    fontWeight: isTitleFontBold === 'Y' ? 'bold' : 'normal',
    fontStyle: isTitleFontItalic === 'Y' ? 'italic' : 'normal',
    textDecoration: isTitleFontUnderline === 'Y' ? 'underline' : '',
    textAlign: position,
  };

  const remarksStyle = {
    fontSize: `${remarksFontSize}px`,
    color: HexToRGB(remarksFontColor, remarksFontColorOpacity),
    fontWeight: isRemarksFontBold === 'Y' ? 'bold' : 'normal',
    fontStyle: isRemarksFontItalic === 'Y' ? 'italic' : 'normal',
    textDecoration: isRemarksFontUnderline === 'Y' ? 'underline' : '',
    textAlign: remarksPosition,
  };

  const bgStyle = {
    marginTop: `${topMargin}px`,
    marginBottom: `${bottomMargin}px`,
    marginLeft: `${Number(horizontalOutterMargin || 0)}px`,
    marginRight: `${Number(horizontalOutterMargin || 0)}px`,
    paddingTop: `${topPadding}px`,
    paddingBottom: `${bottomPadding}px`,
    paddingLeft: `${horizontalInnerPadding}px`,
    paddingRight: `${horizontalInnerPadding}px`,
    backgroundColor: hasBg === 'Y' && bgType === 'Color' ? HexToRGB(bgColor, bgColorOpacity) : 'transparent',
    backgroundImage: hasBg === 'Y' && bgType === 'Image' ? `url(${bgImg.src})` : 'initial',
    // backgroundSize: '100%',
    backgroundPosition: 'top center',
    backgroundRepeat: 'no-repeat',
    backgroundSize: 'cover',
  };

  const planItem = {
    offerName: '50 GB Data Bundle',
    brief: 'Dear customer, it may take you a few minutes to complete the...',
    price: '€22.00',
    guidePrice: '€23.00',
  };

  return (
    <div
      className={cl(styles.carouselBox, {
        hidden: !visible,
      })}
    >
      {dataPresentJourneyList === 'D' && (
        <div className={style.wrap} style={bgStyle}>
          {showTitle && title && (
            <div className={style.titleText} style={titleStyle}>
              {title}
            </div>
          )}
          {showRemarks && remarks && (
            <div className={style.remarks} style={remarksStyle}>
              {remarks}
            </div>
          )}
          {Array.from({ length: 2 }).map((_, index) =>
            offerCardStyle === '1' ? (
              <div key={index} className={style.itemWrap}>
                {shouldShowImage(defImg) && <img src={defImg} alt="" className={style.img} />}
                <div className={style.rightWrap}>
                  <div className={style.title}>{planItem.offerName}</div>
                  <div className={style.tips}>5G</div>
                  <div className={style.breifWrap}>{planItem.brief}</div>
                  <div className={style.priceWrap}>
                    <aside>
                      <div className={style.price}>
                        {planItem.price}
                        <span>/mth</span>
                      </div>
                      <div className={style.guidPrice}>
                        {planItem.guidePrice}
                        <span>/mth</span>
                      </div>
                    </aside>
                    <section>{showDetail && detailsText}</section>
                  </div>
                </div>
              </div>
            ) : (
              <div
                key={index}
                style={{ display: 'block', border: 'none', boxShadow: '0px 3px 8px 0px rgba(0, 0, 0, 0.12)' }}
                className={style.itemWrap}
              >
                {showPlanValidityType && <div className={style.recurring}>Recurring</div>}
                <div className={style.line1}>5G Plan</div>
                <div className={style.line2}>
                  <aside>200GB</aside>
                  <span>5G</span>
                </div>
                <div className={style.line3}>first 6 mths, 100GB thereafter</div>
                <div className={style.price}>
                  {planItem.price}
                  <span>/mth</span>
                </div>
                <div className={style.brief}>
                  <aside>Benefits</aside>
                  <ul>
                    <li>1000 mins + 1000 SMS</li>
                  </ul>
                </div>
                <div className={style.btnText}>{buttonText}</div>
              </div>
            ),
          )}
        </div>
      )}
      {dataPresentJourneyList === 'D' && offerCardStyle === '1' && (
        <Footer showTotalAmount={showTotalAmount} buttonText={buttonText} />
      )}
      {/* Empty Data预览 */}
      {dataPresentJourneyList !== 'D' && (
        <NoData
          showNoDataImg={showNoDataImg}
          noDataImg={noDataImg}
          shwNoDataHtml={shwNoDataHtml}
          noDataHtml={noDataHtml}
          shwNoDataBtn={shwNoDataBtn}
          noDataBtns={noDataBtns}
        ></NoData>
      )}
    </div>
  );
};

export default JourneyPlanListProd;
